<script setup>
import {onMounted} from 'vue'
import {NAvatar, NButton, NFlex, NForm, NFormItem, NImage, NInput, NSelect, NTabPane, NTabs, NTag} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {renderIcon} from "@/utils";
import Project from '@/views/customer/home/project.vue'
import Order from '@/views/customer/home/order.vue'
import Cases from '@/views/customer/home/cases.vue'
import Tags from '@/views/customer/home/tags.vue'
import Photo from '@/views/customer/home/photo.vue'
import Edit from './edit.vue'
import Test from '@/views/customer/home/test.vue'
import Medicine from '@/views/customer/home/medicine.vue'
import Return from '@/views/customer/home/return.vue'
import Appointment from '@/views/customer/home/appointment.vue'

import TheIcon from "@/components/icon/TheIcon.vue";
import Info from "@/views/customer/home/info.vue";

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  select_customer: {
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0

    }
  },
  appoint: {
    id: 0,
  },
});

onMounted(() => {
  data.select_customer.user_id = props.infoData.user_id
  data.appoint.id = props.infoData.id
  update_info()
})

const emit = defineEmits(['call-parent'])

function close_draw() {
  emit('call-parent')
  props.infoData.draw = false
}


function update_info() {
  api.getCustomer({
    user_id: data.select_customer.user_id,
  }).then((res) => {
    data.select_customer = res.data
  })
  return true
}
</script>

<template>
  <div class="main_box">
    <div class="main_header">
      <div style="display: flex">
        <NAvatar :src="data.select_customer.avatar" class="avatar"/>
        <div class="info">
          <span class="name">{{ data.select_customer.name }}{{ data.select_customer.mobile }}</span><br>
          <span class="no">No.{{ data.select_customer.card_number }}
           <n-button v-for="item in data.select_customer.record_hobby" type="error" :bordered="false" size="tiny"
                     class="tags">{{ item.content }}</n-button>
        </span>
        </div>
      </div>
      <div>
        <TheIcon icon="material-symbols:close" style="cursor:pointer" :size="25" class="mr-5" @click="close_draw"/>
      </div>
    </div>
    <n-tabs type="segment" animated size="large" :tabs-padding="20" pane-style="padding: 0px;"
            @before-leave="update_info">


      <n-tab-pane name="本次预约">
        <Edit :info-data="props.infoData" @call-parent="close_draw"/>
      </n-tab-pane>

      <n-tab-pane name="详细资料">
        <Info :info-data="data.select_customer"/>
      </n-tab-pane>
      <n-tab-pane name="报告查询">
        <Test :info-data="data.select_customer"/>
      </n-tab-pane>
      <n-tab-pane name="抗衰计划">
        <Appointment :info-data="data.select_customer"/>
      </n-tab-pane>
      <n-tab-pane name="诊疗记录">
        <Cases :info-data="data.select_customer"/>
      </n-tab-pane>
      <n-tab-pane name="用药管理">
        <Medicine :info-data="data.select_customer"/>
      </n-tab-pane>
      <n-tab-pane name="对比照">
        <Photo :info-data="data.select_customer"/>
      </n-tab-pane>
      <n-tab-pane name="客户笔记">
        <Tags :info-data="data.select_customer"/>
      </n-tab-pane>
      <n-tab-pane name="治疗方案">
        <Return :info-data="data.select_customer"/>
      </n-tab-pane>

    </n-tabs>
  </div>
</template>

<style>
.main_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background: linear-gradient(90deg, #c87373 10%, #67367e 100%);
  padding: 0 20px;
  color: #fff;

  .tags {
    margin-right: 5px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
  }

  .info {
    height: 40px;
    line-height: 20px;

    .no {
      font-size: 12px;
    }

  }
}

.info2 {
  width: 100%;
  padding: 20px;
  display: flex;

  .data_card {
    width: 25%;
    height: 100px;
    margin-right: 20px;

    background: rgba(200, 115, 115, 0.2);
    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      margin-right: 20px;
      background: rgba(200, 115, 115, 1);
      padding: 5px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .con {
      line-height: 20px;
      font-size: 25px;
      color: rgba(200, 115, 115, 1);

      .tag {
        font-size: 14px;
        color: #000;
        font-weight: normal;
      }
    }
  }
}
</style>